<!--
 * @Date: 2023-01-13 11:39:30
 * @LastEditTime: 2023-03-18 12:13:14
 * @FilePath: /hua-fei-chong-zhi/src/components/common/Ctag/Ctag.vue
 * 介绍:Ctag标签
-->
<script lang="ts" setup name="Ctag">
import type { CtagEmun } from "./index";
const className = {
  default: "Ctag__default",
};

const props = defineProps<{
  type?: keyof typeof className;
  enum?: CtagEmun;
  value?: string | number;
}>();
const current = computed(() => {
  return props.enum?.filter((val) => val.value == props.value)[0];
});
</script>

<template>
  <span
    :style="current?.style"
    :class="[className[props.type || 'default'], current?.class]"
    class="Ctag"
  >
    <slot> {{ current?.text }} </slot>
  </span>
</template>

<style lang="less" scoped>
.Ctag {
  vertical-align: middle;
  font-size: var(--T-S-sm);
  padding: 0.2em 1em;
  background-color: var(--C-M1);
  color: var(--C-B2);
}
.Ctag__default {
  border-radius: 999rem;
}
</style>
